<template>
	<view class="wrap1" :class="[isFree == 'N' ? 'activeWrap' : '' ]"
		:style=" isFree == 'N' ? 'background: rgba(0, 0, 0, .5)' : '' ">
		<view class="inner" :class="[isFree == 'N' ? 'activeinner' : '' ]">
			<video class="vido" objectFit="fill" :src="imgSrc" style="width= 100%; height=100%; object-fit: fill"></video>
			<!-- :style='{backgroundImage:`url(${imgSrc})`}' -->
		</view>
		<template v-if="isFree == 'N'">
			<view class="text1">
				开通会员观看视频做法
			</view>
			<view class="text2">
				立即开通
			</view>
			<view class="text3">
				已是会员，立即登录
			</view>
		</template>

	</view>
</template>

<script>
	export default {
		props: {
			isbool: {
				type: Boolean,
				default: true, // 默认值为 100
			},
			imgSrc: {
				type: String
			},
			isFree: {
				type: String
			}
		}
	}
</script>

<style scoped>
	.activeWrap {
		position: relative;
	}

	.wrap1 {

		width: 750rpx;
		height: 400rpx;
		border: 1px solid transparent;
	}

	.activeinner {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: -1;
	}

	.inner {


		background: no-repeat center center;
		background-size: 100% 100%;
		/* z-index: -1; */
	}

	.vido {
		width: 750rpx;
		height: 400rpx;
		
	}

	.text1 {
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 86rpx;
		text-align: center;
		position: relative;
		z-index: 5;
	}

	.text2 {
		width: 244rpx;
		height: 68rpx;
		line-height: 68rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: rgb(118, 64, 31);
		text-align: center;
		background-image: linear-gradient(90deg, rgb(249, 233, 205) 0%, rgb(237, 214, 178) 50%, rgb(237, 214, 178));
		margin-top: 30rpx;
		border-radius: 20rpx;
	}

	.text3 {
		font-size: 32rpx;
		color: rgb(247, 230, 201);
		text-align: center;
		margin-top: 36rpx;
	}
</style>
